<template>
	<div class="pic-group">
		<div class="item" v-for="(item,index) in listData">
			<div class="form-group border-0">
				<fileUploadVue @change="change" :files.sync="item.files" :max-count="1" file-type="image" />
				<input type="text" @input="change" class="input" v-model="item.title" placeholder="素材标题" />
				<div class="del" @click="listData.splice(index,1);change()">删除</div>
			</div>
		</div>
	</div>
</template>

<script>
	import fileUploadVue from '../../components/fileUpload.vue'
	export default {
		components: {
			fileUploadVue
		},
		props: ["itemValue"],
		watch: {
			itemValue() {
				this.init()
			},
			// listData(n) {
			// 	this.change()
			// }
		},
		data() {
			return {
				listData: []
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				if (this.itemValue) {
					const files = String(this.itemValue || '').split(";")[0].split(",");
					const titles = String(this.itemValue || '').split(";")[1].split(",");
					this.listData = [];
					files.forEach((item, index) => {
						this.listData.push({
							files: item ? [item] : "",
							title: titles[index]
						})
					})
				}
			},
			add() {
				this.listData.push({
					files: [],
					title: ""
				})
				this.change()
			},
			change() {
				let str = ""
				let files = []
				let titles = []
				this.listData.forEach(item => {
					files.push(item.files[0])
					titles.push(item.title)
				})
				str = `${files.join(",")};${titles.join(",")}`
				this.$emit("change", str)
			}
		}
	}
</script>

<style>
	.input {
		background-color: #F6F7FB;
		border-radius: 22rpx;
		height: 78rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 16rpx;
		font-size: 28rpx;
		margin-top: -20rpx;
		margin-bottom: 10px;
	}

	.pic-group {
		display: flex;
		margin-top: 20rpx;
		overflow: auto;

		.item {
			margin-right: 20rpx;
			width: 170rpx;
		}

		.input {
			width: 130rpx;
			font-size: 22rpx;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.del {
		background-color: #e20e1d;
		color: #fff;
		width: 130rpx;
		font-size: 24rpx;
		padding: 10rpx 0;
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
</style>